import { FC } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";

import { AppOutline, UserOutline } from "antd-mobile-icons";
import { Image } from "antd-mobile";
// import { useTranslation } from 'react-i18next';
import styles from "./layouts.module.less";
import getAssetsFile from "@/utils/pub-use";
import { useTranslation } from "react-i18next";
const Bottom: FC = () => {
  // const [t] = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
  console.log(location);
  const { pathname } = location;

  const setRouteActive = (value: string) => {
    navigate(value);
  };
  const { t } = useTranslation();
  const tabs = [
    {
      key: "/U2U",
      title: "G2G",
      image: "U2U",
      activeImage: "tab1",
      icon: <AppOutline />,
    },
    {
      key: "/STC",
      title: "RWA",
      image: "STC",
      activeImage: "tab2",
      icon: <UserOutline />,
    },
    {
      key: "/",
      title: "",
      image: "SMIC",
      activeImage: "tab5",
      icon: <UserOutline />,
    },
    {
      key: "/resettle",
      title: "aimatrix",
      image: "resettle",
      activeImage: "tab3",
      icon: <UserOutline />,
    },
    {
      key: "/news",
      title: "Information",
      image: "news",
      activeImage: "tab4",
      icon: <UserOutline />,
    },
  ];

  return (
    <div
      className="bg-bg-13 flex justify-around text-white-1"
      style={{ height: "74px" }}
    >
      {tabs.map((item) => {
        return (
          <div
            key={item.key}
            className={`flex justify-center relative ${styles[pathname === item.key ? "active" : ""]}`}
          >
            {pathname === item.key ? (
              <div className="flex flex-col items-center justify-center">
                <Image
                  className={`w-5 h-5 overflow-visible relative z-10 ${styles[pathname === item.key ? "" : ""]}`}
                  src={getAssetsFile(`tabbar/${item.activeImage}.png`)}
                  style={{
                    width: item.activeImage === "tab5" ? "54px" : "",
                    height: item.activeImage === "tab5" ? "54px" : "",
                  }}
                />
                <div style={{ marginTop: "5px" }}>
                  <p className="text-xs">{t(item.title)}</p>
                </div>
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center">
                <Image
                  onClick={() => setRouteActive(item.key)}
                  className="w-5 h-5"
                  src={getAssetsFile(`tabbar/${item.activeImage}.png`)}
                  style={{
                    width: item.activeImage === "tab5" ? "54px" : "",
                    height: item.activeImage === "tab5" ? "54px" : "",
                  }}
                />
                <div style={{ marginTop: "5px" }}>
                  <p className="text-xs">{t(item.title)}</p>
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

const layouts = () => {
  return (
    <div className="relative">
      <Outlet />
      <div className="fixed bottom-0 w-full">
        <Bottom />
      </div>
      {/* <Route path="/about"></Route> */}
    </div>
  );
};

export default layouts;
